import { useLocation } from 'umi'
import { observer, useLocalObservable } from 'mobx-react'
import NavBar from '@/components/Global/NavBar'
import styles from './index.module.less'
import Store from './store'
import { useState, useEffect } from 'react'
import { Button, Modal, TextArea } from 'antd-mobile'
// import { getWeek, getDate } from '@/utils/formatterDate'
import { PhotoProvider, PhotoView } from 'react-photo-view'
import 'react-photo-view/dist/react-photo-view.css'
import CheckResult from './components/CheckResult'

export default observer(() => {
    const { queryDetail, trainDetail, majorDict, info, onSubmit } = useLocalObservable(
        () => new Store(),
    )
    const [visible, setVisible] = useState<boolean>(false)
    const [succVisible, setSuccVisible] = useState<boolean>(false)
    const state: { id?: number } = useLocation().state || {}
    const [checkReason, setCheckReason] = useState<string>('')

    useEffect(() => {
        state.id && queryDetail(state.id)
    }, [])

    const isAudit: () => boolean = () => {
        return info?.is_check !== 0
    }

    const ModalRender = (
        <>
            <div className={styles.modalView}>
                <TextArea
                    value={checkReason}
                    onChange={setCheckReason}
                    className={styles.textView}
                    placeholder="请输入不通过意见"
                />
                <span>文字要求：不超过50字符</span>
            </div>
            <div
                className={styles.handleView}
                onClick={() => {
                    onSubmit({
                        check: 2,
                        check_reason: checkReason,
                    })
                    setCheckReason('')
                }}
            >
                提交
            </div>
        </>
    )
    const ModalSuccRender = (
        <>
            <div className={styles.modalSuccessView}>辅助说明文字辅助说明文字辅助说明文辅助说</div>
            <div className={styles.handleView}>提交</div>
        </>
    )

    return (
        <div className={styles.page}>
            <NavBar title={'计划详情'} />
            <div className={styles.content}>
                <div className={styles.trainInfo}>
                    <div className={styles.title}>{trainDetail.name}</div>
                    <div className={styles.planInfo}>
                        <section>
                            <div>
                                <label>填表单位</label>
                                <span> {trainDetail.company_name}</span>
                            </div>
                            <div>
                                <label>地区</label>
                                <span> {trainDetail.region}</span>
                            </div>
                            <div>
                                <label>联系人</label>
                                <span> {trainDetail.realname}</span>
                            </div>
                            <div>
                                <label>联系电话</label>
                                <span> {trainDetail.phone}</span>
                            </div>
                            <div>
                                <label>计划年份</label>
                                <span> {trainDetail.plan_date}</span>
                            </div>
                            <div>
                                <label>盖章件</label>
                                <PhotoProvider>
                                    <PhotoView src={trainDetail.image}>
                                        <img src={trainDetail.image} />
                                    </PhotoView>
                                </PhotoProvider>
                            </div>
                        </section>
                    </div>
                </div>
                {trainDetail.subdata?.length ? (
                    <div>
                        <div className={styles.title}>开班信息</div>
                        <div className={styles.classInfo}>
                            {trainDetail.subdata?.map(item => (
                                <section key={item.id}>
                                    <div>
                                        <label>类别</label>
                                        <span> {majorDict[item.major_id]}</span>
                                    </div>
                                    <div>
                                        <label>班次</label> <span> {item.sort_id}</span>
                                    </div>
                                    <div>
                                        <label>计划时间</label>
                                        <span> {item.plan_date}</span>
                                    </div>
                                    <div>
                                        <label>计划人数</label>
                                        <span> {item.plan_number}人</span>
                                    </div>
                                </section>
                            ))}
                        </div>
                    </div>
                ) : null}

                <div>
                    <div className={styles.title}>审核结果</div>
                    {info?.province_check_status === 0 ? null : (
                        <CheckResult
                            type="province"
                            time={info?.province_check_time}
                            result={info?.province_check_status === 1}
                            opinion={info?.province_check_reason ?? ''}
                        />
                    )}

                    {info?.center_check_status === 0 ? null : (
                        <CheckResult
                            type="center"
                            result={info?.center_check_status === 1}
                            time={info?.center_check_time}
                            opinion={info?.center_check_reason ?? ''}
                        />
                    )}
                </div>
            </div>
            {!isAudit() && (
                <div className={styles.footerBar}>
                    <Button onClick={() => setVisible(true)}> 不通过</Button>
                    <Button
                        onClick={() => {
                            onSubmit(
                                {
                                    check: 1,
                                    check_reason: '',
                                },
                                () => {
                                    setSuccVisible(true)
                                },
                            )
                        }}
                    >
                        通过
                    </Button>
                </div>
            )}

            <Modal
                visible={visible}
                content={ModalRender}
                closeOnAction
                closeOnMaskClick
                bodyStyle={{ margin: 0, padding: '12px 0 0 0' }}
                title="不通过意见"
                onClose={() => {
                    setVisible(false)
                }}
            />
            <Modal
                visible={succVisible}
                content={ModalSuccRender}
                closeOnAction
                closeOnMaskClick
                bodyStyle={{ margin: 0, padding: '12px 0 0 0' }}
                title="审核通过成功"
                onClose={() => {
                    setSuccVisible(false)
                }}
            />
        </div>
    )
})
